﻿<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<!-- 引入 ECharts 文件 -->
		<script src="lib/echarts.js"></script>
		<script src="map/js/world.js"></script>
		<!--引入Jquery-->
		<script type="text/javascript" src="lib/jquery-3.1.1.js"></script>
		<!--引入bootstrap文件-->
		<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css">
		<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>

		<!--
        	作者：542440582@qq.com
        	时间：2017-01-06
        	描述：3D地球
        -->
		<script src="lib/3D_earth/d3.v3.min.js"></script>
		<script src="lib/3D_earth/queue.v1.min.js"></script>
		<script src="lib/3D_earth/topojson.v1.min.js"></script>

		<!--引入万能table-->
		<link href="lib/functiontable/datatables.min.css" rel="stylesheet" type="text/css" />
		<link href="lib/functiontable/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
		<!-- END PAGE LEVEL PLUGINS -->
		<!-- BEGIN THEME GLOBAL STYLES -->
		<link href="lib/functiontable/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
		<link href="lib/functiontable/plugins.min.css" rel="stylesheet" type="text/css" />
		<!-- END THEME GLOBAL STYLES -->
		<!-- BEGIN THEME LAYOUT STYLES -->

		<!-- BEGIN PAGE LEVEL PLUGINS -->
		<script src="lib/functiontable/datatables.min.js" type="text/javascript"></script>
		<script src="lib/functiontable/datatables.bootstrap.js" type="text/javascript"></script>
		<!-- END PAGE LEVEL PLUGINS -->
		<!-- BEGIN THEME GLOBAL SCRIPTS -->
		<!--<script src="lib/functiontable/table-datatables-colreorder.min.js" type="text/javascript"></script>-->
		<!-- END PAGE LEVEL SCRIPTS -->
		<!-- BEGIN THEME LAYOUT SCRIPTS -->
		<!--万能表格引入完毕-->
		<!--轮播CSS-->
		<link rel="stylesheet" href="css/top10atk&atkd.css" />
		<!--标题样式-->
		<link rel="stylesheet" href="css/top10atk&atkd_title.css" />

		<style>
			h1 {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 18px;
			}
			
			.switch_triger {}
			
			.ontime_atk {}
		</style>
		<title>10大攻击源</title>

	</head>

	<body style="background-color:#404a59;">

		<div class="col-md-12  " id="ontime_atk" style="z-index:1;opacity:0.3;">

			<div class="col-md-12 ontime_info_atk" style="margin-top:1%;background-color: #000000">
				<ul id="ontime_atk_ul">

				</ul>
			</div>

		</div>

		<div class="col-md-12  " id="ontime_atkd" style="z-index:1;opacity:0.3;">

			<div class="col-md-12 ontime_info_atkd" style="margin-top:1%;background-color: #000000">
				<ul id="ontime_atkd_ul">

				</ul>
			</div>

		</div>
		<!--//设置顶部滚动实时攻击和被攻击信息-->
		<script type="text/javascript">
			function autoScroll(obj) {
				$(obj).find("ul").animate({
					marginTop: "-39px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				})
			}
			$(function() {

				setInterval('autoScroll(".ontime_info_atk")', 2000);
				setInterval('autoScroll(".ontime_info_atkd")', 2000);

			})
		</script>


		<div class="col-md-12" id="attack_ip" style="height:638px;width:1360px;z-index: 0;position: relative;margin-top: -5%;">
		</div>
		<script>
			$.getTwoDensionArr = function(dension, len) {
				var arr = new Array();
				for(var i = 0; i < dension; i++) {
					arr[i] = new Array();
					for(var j = 0; j < len; j++) {
						arr[i][j] = "default";
					}
				}
				return arr;
			};
		</script>
		<script>
			/*攻击者画布部分*/
			//请求数据
			//初始化table数据
			$.ajaxSetup({
				async: false
			});
//			等待联调
//			var all_atker_all_atks = [];
//			var middle_atk_data = [[{'name':'','value':0},{'name':'','value':0,'ip':''}]];
//			$.get('static/data/top10_attack&underatt/attacker.json',function(data){
//			
//					
//					data.data.forEach(function(item,i){
//						var one_atker_all_atks = [];
//						one_atker_all_atks.push(item.ip);
//						var inner_data = jiekou(item.ip);
//						inner_data.forEach(function(item_inner,i_inner){
//						var middle_atk_data = [[{'name':'','value':0},{'name':'','value':0,'ip':''}]];
//						middle_atk_data[i_inner][0].name=item.wz;
//						middle_atk_data[i_inner][0].value = item.wx;//如果确实没有count属性就利用top1到top10的排序从100递减到10即可
//						middle_atk_data[i_inner][1].name=item_inner.wz;
//						middle_atk_data[i_inner][1].value = item_inner.wx;//根据排序从100递减到10
//						//这里是否可以在被攻击者的value 后面加一个ip属性用于所有被攻击者的显示。应该是可以的。可以1.18
						 //middle_atk_data[i_nner][1].ip = item_inner.ip;
//						});
//						one_atker_all_atks.push(middle_atk_data);
//						all_atker_all_atks.push(one_atker_all_atks);
//						
//						
//					});
//			});
		
			
			var attack_Chart = echarts.init(document.getElementById('attack_ip'));

			attack_switch_data = $.getTwoDensionArr(0, 8);
			underattack_switch_data = $.getTwoDensionArr(0, 7);

			attack_Chart.on('click', function(params) {
				// 控制台打印数据的名称
				//console.log(params.name + '	' + params.componentType + '	' + params.seriesType + '	' + params.dataIndex + '	' + params.color+	'	'+params.data);
				var tempdata = params.name;
				//取到ip地址

				var ip_array_temp = tempdata.split('(');
				var attack_ip = ip_array_temp[1].split(')')[0];
				//联调输入数据
				var atk_input_data = {};
				atk_input_data.ip = attack_ip;
				atk_input_data.page = 1;
				atk_input_data.size = 1000;
				atk_input_data.category = "atkList";
				atk_input_data.start = "2017-01-01 00:00:00";
				atk_input_data.end = "2017-01-017 00:00:00";
				/*等待联调*/
				//var atk_click_data = 接口（）;

				//后期联调调用函数获得制定攻击ip的data即可
				var attack_ip_json = 'static\\data\\top10_attack&underatt\\' + attack_ip + '.json';
				$.get(attack_ip_json, function(data, status) {
					if(status == "success") {
						var underattack = data.data;
						var temp = [];
						var row_count = underattack.length;
						attack_switch_data = $.getTwoDensionArr(row_count, 8);
						underattack.forEach(function(item, i) {
							temp.push(item.ip);
							temp.push(item.wz);
							temp.push(item.zcmc);
							temp.push(item.dk);
							temp.push(item.xy);
							temp.push(item.sj);
							temp.push(item.sjmc);
							temp.push(item.wx);
							attack_switch_data[i] = temp;

							temp = [];
							//alert(temp);

						});

					} else {
						attack_switch_data = $.getTwoDensionArr(0, 8);
					}

					//这里利用remove去掉或者add添加到与json一样的数据条数？？

				});

				//每次进行ajax请求的时候都需要重新传data给table，这样才好更新数据，table无bug
				$('#detail_info').dataTable({

					// Or you can use remote translation file
					//"language": {
					//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
					//},

					// setup buttons extentension: http://datatables.net/extensions/buttons/
					buttons: [{
						extend: 'print',
						className: 'btn dark btn-outline'
					}, {
						extend: 'pdf',
						className: 'btn green btn-outline'
					}, {
						extend: 'csv',
						className: 'btn purple btn-outline '
					}],

					// setup responsive extension: http://datatables.net/extensions/responsive/
					responsive: true,

					// setup colreorder extension: http://datatables.net/extensions/colreorder/
					colReorder: {
						reorderCallback: function() {
							console.log('callback');
						}
					},

					"order": [
						[0, 'asc']
					],

					"lengthMenu": [
						[5, 10, 15, 20, -1],
						[5, 10, 15, 20, "All"] // change per page values here
					],
					// set the initial value
					"pageLength": 10,
					"destroy": true,

					"data": attack_switch_data,

					"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

					// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
					// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
					// So when dropdowns used the scrollable div should be removed. 
					//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
				});
			});
			//画地图，这里面决定了攻击和被攻击地点是否能够在地图上显示，若不能就需要向该数组添加项
			var geoCoordMap = {
				'华盛顿': [-77.02, 38.54],
				'上海': [121.4648, 31.2891],
				'东莞': [113.8953, 22.901],
				'东营': [118.7073, 37.5513],
				'中山': [113.4229, 22.478],
				'临汾': [111.4783, 36.1615],
				'临沂': [118.3118, 35.2936],
				'丹东': [124.541, 40.4242],
				'丽水': [119.5642, 28.1854],
				'乌鲁木齐': [87.9236, 43.5883],
				'佛山': [112.8955, 23.1097],
				'保定': [115.0488, 39.0948],
				'兰州': [103.5901, 36.3043],
				'包头': [110.3467, 41.4899],
				'北京': [116.4551, 40.2539],
				'北海': [109.314, 21.6211],
				'南京': [118.8062, 31.9208],
				'南宁': [108.479, 23.1152],
				'南昌': [116.0046, 28.6633],
				'南通': [121.1023, 32.1625],
				'厦门': [118.1689, 24.6478],
				'台州': [121.1353, 28.6688],
				'合肥': [117.29, 32.0581],
				'呼和浩特': [111.4124, 40.4901],
				'咸阳': [108.4131, 34.8706],
				'哈尔滨': [127.9688, 45.368],
				'唐山': [118.4766, 39.6826],
				'嘉兴': [120.9155, 30.6354],
				'大同': [113.7854, 39.8035],
				'大连': [122.2229, 39.4409],
				'天津': [117.4219, 39.4189],
				'太原': [112.3352, 37.9413],
				'威海': [121.9482, 37.1393],
				'宁波': [121.5967, 29.6466],
				'宝鸡': [107.1826, 34.3433],
				'宿迁': [118.5535, 33.7775],
				'常州': [119.4543, 31.5582],
				'广州': [113.5107, 23.2196],
				'廊坊': [116.521, 39.0509],
				'延安': [109.1052, 36.4252],
				'张家口': [115.1477, 40.8527],
				'徐州': [117.5208, 34.3268],
				'德州': [116.6858, 37.2107],
				'惠州': [114.6204, 23.1647],
				'成都': [103.9526, 30.7617],
				'扬州': [119.4653, 32.8162],
				'承德': [117.5757, 41.4075],
				'拉萨': [91.1865, 30.1465],
				'无锡': [120.3442, 31.5527],
				'日照': [119.2786, 35.5023],
				'昆明': [102.9199, 25.4663],
				'杭州': [119.5313, 29.8773],
				'枣庄': [117.323, 34.8926],
				'柳州': [109.3799, 24.9774],
				'株洲': [113.5327, 27.0319],
				'武汉': [114.3896, 30.6628],
				'汕头': [117.1692, 23.3405],
				'江门': [112.6318, 22.1484],
				'沈阳': [123.1238, 42.1216],
				'沧州': [116.8286, 38.2104],
				'河源': [114.917, 23.9722],
				'泉州': [118.3228, 25.1147],
				'泰安': [117.0264, 36.0516],
				'泰州': [120.0586, 32.5525],
				'济南': [117.1582, 36.8701],
				'济宁': [116.8286, 35.3375],
				'海口': [110.3893, 19.8516],
				'淄博': [118.0371, 36.6064],
				'淮安': [118.927, 33.4039],
				'深圳': [114.5435, 22.5439],
				'清远': [112.9175, 24.3292],
				'温州': [120.498, 27.8119],
				'渭南': [109.7864, 35.0299],
				'湖州': [119.8608, 30.7782],
				'湘潭': [112.5439, 27.7075],
				'滨州': [117.8174, 37.4963],
				'潍坊': [119.0918, 36.524],
				'烟台': [120.7397, 37.5128],
				'玉溪': [101.9312, 23.8898],
				'珠海': [113.7305, 22.1155],
				'盐城': [120.2234, 33.5577],
				'盘锦': [121.9482, 41.0449],
				'石家庄': [114.4995, 38.1006],
				'福州': [119.4543, 25.9222],
				'秦皇岛': [119.2126, 40.0232],
				'绍兴': [120.564, 29.7565],
				'聊城': [115.9167, 36.4032],
				'肇庆': [112.1265, 23.5822],
				'舟山': [122.2559, 30.2234],
				'苏州': [120.6519, 31.3989],
				'莱芜': [117.6526, 36.2714],
				'菏泽': [115.6201, 35.2057],
				'营口': [122.4316, 40.4297],
				'葫芦岛': [120.1575, 40.578],
				'衡水': [115.8838, 37.7161],
				'衢州': [118.6853, 28.8666],
				'西宁': [101.4038, 36.8207],
				'西安': [109.1162, 34.2004],
				'贵阳': [106.6992, 26.7682],
				'连云港': [119.1248, 34.552],
				'邢台': [114.8071, 37.2821],
				'邯郸': [114.4775, 36.535],
				'郑州': [113.4668, 34.6234],
				'鄂尔多斯': [108.9734, 39.2487],
				'重庆': [107.7539, 30.1904],
				'金华': [120.0037, 29.1028],
				'铜川': [109.0393, 35.1947],
				'银川': [106.3586, 38.1775],
				'镇江': [119.4763, 31.9702],
				'长春': [125.8154, 44.2584],
				'长沙': [113.0823, 28.2568],
				'长治': [112.8625, 36.4746],
				'阳泉': [113.4778, 38.0951],
				'青岛': [120.4651, 36.3373],
				'韶关': [113.7964, 24.7028]
			};
			//定义炮弹的路径，即攻击路径，Value代表攻击者的排序，值越大排序越靠前
			var CDData = [
				[{
					name: '成都',
					value: 10
				}, {
					name: '北京',
					value: 5,
					ip:'101.112.42.1'
				}],
				

			];
			var CQData = [
				[{
					name: '重庆',
					value: 20
				}, {
					name: '北京',
					value: 5,
					ip:'101.112.42.1'
				}],
			];
			var CSData = [
				[{
					name: '长沙',
					value: 30
				}, {
					name: '北京',
					value: 5,
					ip:'101.112.42.1'
				}],
				[{
					name: '长沙',
					value: 30
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var SGData = [
				[{
					name: '韶关',
					value: 40
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var QDData = [
				[{
					name: '青岛',
					value: 50
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var YCData = [
				[{
					name: '银川',
					value: 60
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var HDData = [
				[{
					name: '邯郸',
					value: 70
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var GYData = [
				[{
					name: '贵阳',
					value: 80
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var XNData = [
				[{
					name: '西宁',
					value: 90
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
			];
			var HLDData = [
				[{
					name: '葫芦岛',
					value: 100
				}, {
					name: '华盛顿',
					value: 5,
					ip:'99.21.23.12'
				}],
				[{
					name: '葫芦岛',
					value: 100
				}, {
					name: '中山',
					value: 5,
					ip:'93.21.23.12'
				}],
			];
			//矢量图形，用来画飞机的！
			var target = 'path://M10.121,4.464L8,6.586L5.879,4.464L4.464,5.879L6.586,8l-2.121,2.121,l1.414,1.414L8,9.414l2.121,2.121l1.414-1.414L9.414,8l2.121-2.121L10.121,4.464z M13.657,2.343c-3.124-3.124-8.19-3.124-11.314,0,c-3.124,3.124-3.124,8.19,0,11.314c3.124,3.124,8.19,3.124,11.314,0C16.781,10.533,16.781,5.467,13.657,2.343z M12.243,12.243,c-2.343,2.343-6.142,2.343-8.485,0s-2.343-6.142,0-8.485c2.343-2.343,6.142-2.343,8.485,0,C14.586,6.101,14.586,9.899,12.243,12.243z';
			var planePath = 'path://M48,1C22.042,1,1,22.043,1,48s21.042,47,47,47s47-21.043,47-47S73.958,1,48,1z M48,78c-16.542,0-30-13.458-30-30,s13.458-30,30-30s30,13.458,30,30S64.542,78,48,78z';
			//转换数据用的
			var convertData = function(data) {
				var res = [];
				for(var i = 0; i < data.length; i++) {
					var dataItem = data[i];
					//取得攻击者和被攻击者的地理坐标
					var fromCoord = geoCoordMap[dataItem[0].name];
					var toCoord = geoCoordMap[dataItem[1].name];
					if(fromCoord && toCoord) {
						res.push({
							fromName: dataItem[0].name,
							toName: dataItem[1].name,
							coords: [fromCoord, toCoord],
							//value: dataItem[0].value,

						});
					}
				}

				return res;
			};

			var color = ['#206020', '#8cd98c', '#0033cc', '#668cff', '#cccc00', '#ffff66', '#cc00cc', '#ffb3ff', '#ff6666', '#ff0000'];
			//定义了炮弹的10中size,这样的话需要对攻击者的危害从小到大的排序！！
			var SYMBOL_SIZE = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
			var series = [];
			var top_10_attacker = [
				['101.12.42.1', CDData],
				['121.12.42.1', CQData],
				['125.12.42.1', CSData],
				['13.12.42.1', SGData],
				['23.12.42.1', QDData],
				['120.12.42.1', YCData],
				['103.12.42.1', GYData],
				['32.12.42.1', GYData],
				['34.12.42.1', XNData],
				['30.12.42.1', HLDData]
			];

			top_10_attacker.forEach(function(item, i) {

				series.push(
					//最底层画布，利用尾痕迹来模拟炮弹效果
					{

						name: 'attack from	' + item[0],
						type: 'lines',
						zlevel: 1,
						effect: {

							show: true,
							period: 6,
							trailLength: 0.1, //通过tailLength控制尾部的长度
							color: color[i], //之后看看color能否每个都不同？？wait
							symbol: 'circle',
							//之后如果有不确定个数目的攻击源如何来做到size的不同？？wait
							symbolSize: SYMBOL_SIZE[i] / 10,
							loop: true, //特效不重复，也可以重复，看客户需求
						},
						//这里隐藏了线条，就是为了实现炮弹的效果
						lineStyle: {
							normal: {
								color: color[i],
								width: 0,
								curveness: 0.5 //边的曲度，支持从 0 到 1 的值，值越大曲度越大。
							}
						},
						data: convertData(item[1])
					},

					/*小圆点动画,更改小圆点到小圆圈，或者其他的图形即可*/
					//这块代码暂时不需要用到
					{
						//name: item[0] + ' Top10', //为每条线设置一个名字，鼠标放置在上面时显示
						type: 'lines',
						animationDuration: 4000,

						animationEasing: 'quadraticOut',
						zlevel: 2,
						effect: {
							show: true,
							period: 5,
							trailLength: 0,
							symbol: planePath,
							symbolSize: 0, //取消小圆圈
						},

						lineStyle: {
							normal: {

								color: color[i],
								width: 0, //不可视连线
								opacity: 1,
								curveness: 0.5 //连线的曲度
							}
						},
						data: convertData(item[1])
					},
					//攻击源
					/*显示终点的涟漪效果*/
					{
						//排好序的top10——json数据
						name: 'Top:' + (10 - i) + '	Attacker:	',
						type: 'effectScatter',
						coordinateSystem: 'geo', //使用的坐标系
						zlevel: 1,
						rippleEffect: {
							brushType: 'fill' //波纹的绘制方式
								//symbol: attacker ,
						},
						label: {
							normal: {
								show: false, //不展示，因为把攻击者IP放入后，会很冗长
								position: 'right',
								formatter: '{b}'
							}
						},
						symbolSize: function(val) {

							return val[2] / 5;
						},
						itemStyle: {
							normal: {
								color: color[i]
							}
						},
						data: item[1].map(function(dataItem) {
							return {
								//通过数组中的索引确定攻击者和被攻击者
								name: dataItem[0].name.concat('(').concat(item[0]).concat(')'),
								value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
							};
						})
					},
					//被攻击者
					{
						name: 'UNDER ATTACK!!',
						type: 'effectScatter',
						coordinateSystem: 'geo', //使用的坐标系
						zlevel: 4,
						symbol: target,
						symbolSize: function(val) {
							//原来的数据太小，所以扩大5倍
							return val[2] / 0.2;
						},

						rippleEffect: {
							brushType: 'stroke' //波纹的绘制方式
						},

						label: {
							normal: {
								show: true,
								position: 'right',
								formatter: '{b}'
							}
						},

						itemStyle: {
							normal: {
								color: 'red',
							}
						},
						data: item[1].map(function(dataItem) {
							return {
								//通过数组中的索引确定攻击者和被攻击者
								name: dataItem[1].name,
								value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
							};
						})
					}

				);

			});

			option = {
				backgroundColor: '#404a59',
				title: {
					//text: 'TOP-10 ATTACKER',
					subtext: '',
					left: 'center',
					textStyle: {
						color: '#fff'
					}
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					top: 'bottom',
					left: 'right',
					data: [],
					textStyle: {
						color: '#fff'
					},
					selectedMode: 'single'
				},
				geo: {
					map: 'world',
					zoom: 1.3,
					label: {
						emphasis: {
							show: true
						}
					},
					roam: true,
					itemStyle: {
						normal: {
							areaColor: '#323c48',
							borderColor: '#404a59'
						},
						emphasis: {
							areaColor: '#2a333d'
						}
					}
				},
				series: series
			};

			if(option && typeof option === "object") {
				attack_Chart.setOption(option, true);
			}
		</script>

		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div class="col-md-12" id="underattack_ip" style="width: 1360px;height: 638px;z-index: 0;position: relative;margin-top:-5%;">

		</div>
		<!--
        	作者：542440582@qq.com
        	时间：2017-01-08
        	描述：被攻击者画布
        1.18,后续还需要改动，主要是top10_attaker要替换为top10_underattak,但数据格式一定保持和top10attaker一致
        思路，先从利用接口获取10大被攻击资产，再循环调用详细信息接口获取攻击每个资产的攻击者，放入middle_data中，而且这里攻击者ip应该要放入对象中?
        -->
		<script>
			var underattack_Chart = echarts.init(document.getElementById('underattack_ip'));
			underattack_Chart.on('click', function(params) {
				// 控制台打印数据的名称
				var tempdata = params.name;

				//取到ip地址
				var ip_array_temp = tempdata.split('(');
				var underattack_ip = ip_array_temp[1].split(')')[0];

				//后期联调调用函数获得制定攻击ip的data即可
				//对于点击没有json对应的攻击项目时现在不处理错误，因为后期获取data，只需要判断data
				var underattack_ip_json = 'static\\data\\top10_attack&underatt\\' + underattack_ip + '.json';
				//联调输入
				var atkd_input_data = {};
				atkd_input_data.category = "atkdList";
				atkd_input_data.ip = underattack_ip;
				atkd_input_data.page = 1;
				atkd_input_data.size = 1000;
				atkd_input_data.start = "2017-01-01 00:00:00";
				atkd_input_data.end = "2017-01-017 00:00:00";
				//等待联调 var atkd_click_data = 接口（）;

				$.get(underattack_ip_json, function(data, status) {

					if(status === 'success') {
						var attack = data.data;
						underattack_switch_data = $.getTwoDensionArr(attack.length, 7);
						var temp = [];
						attack.forEach(function(item, i) {
							temp.push(item.ip);
							temp.push(item.wz);
							temp.push(item.sj);

							temp.push(item.dk);
							temp.push(item.xy);

							temp.push(item.sjmc);
							temp.push(item.wx);
							underattack_switch_data[i] = temp;

							temp = [];
							//alert(temp);

						});

					} else {
						underattack_switch_data = $.getTwoDensionArr(0, 7);
					}

				});
				//				console.log(attack_ip);
				$('#underdetail_info').dataTable({

					// Or you can use remote translation file
					//"language": {
					//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
					//},

					// setup buttons extentension: http://datatables.net/extensions/buttons/
					buttons: [{
						extend: 'print',
						className: 'btn dark btn-outline'
					}, {
						extend: 'pdf',
						className: 'btn green btn-outline'
					}, {
						extend: 'csv',
						className: 'btn purple btn-outline '
					}],

					// setup responsive extension: http://datatables.net/extensions/responsive/
					responsive: true,

					// setup colreorder extension: http://datatables.net/extensions/colreorder/
					colReorder: {
						reorderCallback: function() {
							console.log('callback');
						}
					},

					"order": [
						[0, 'asc']
					],

					"lengthMenu": [
						[5, 10, 15, 20, -1],
						[5, 10, 15, 20, "All"] // change per page values here
					],
					// set the initial value
					"pageLength": 10,
					"destroy": true,
					"data": underattack_switch_data,

					"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

					// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
					// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
					// So when dropdowns used the scrollable div should be removed. 
					//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
				});

			});
			
			//重新复制series不然上面的series会覆盖被攻击图
			series = [];

			top_10_attacker.forEach(function(item, i) {

				series.push(
					//最底层画布，利用尾痕迹来模拟炮弹效果
					{

						name: 'attack from	' + item[0],
						type: 'lines',
						zlevel: 1,
						effect: {

							show: true,
							period: 6,
							trailLength: 0.1, //通过tailLength控制尾部的长度
							color: color[i], //之后看看color能否每个都不同？？wait
							symbol: 'circle',
							//之后如果有不确定个数目的攻击源如何来做到size的不同？？wait
							symbolSize: SYMBOL_SIZE[i] / 10,
							loop: true, //特效不重复，也可以重复，看客户需求
						},
						//这里隐藏了线条，就是为了实现炮弹的效果
						lineStyle: {
							normal: {
								color: color[i],
								width: 0,
								curveness: 0.5 //边的曲度，支持从 0 到 1 的值，值越大曲度越大。
							}
						},
						data: convertData(item[1])
					},

					//被攻击者
					{
						//name: item[2],//显示被攻击IP
						type: 'effectScatter',
						coordinateSystem: 'geo', //使用的坐标系
						zlevel: 4,
						symbol: target,

						symbolSize: function(val) {
							//原来的数据太小，所以扩大5倍
							return val[2] / 0.2;
						},

						rippleEffect: {
							brushType: 'stroke' //波纹的绘制方式
						},

						label: {
							normal: {
								show: true,
								position: 'right',
								formatter: '{b}'
							}
						},

						itemStyle: {
							normal: {
								color: 'red',
							}
						},
						data: item[1].map(function(dataItem) {
						//联调的时候这里的数据要结合上面的联调数据格式来改1.18
							return {
								//通过数组中的索引确定攻击者和被攻击者,搞定1.18
								name: dataItem[1].name.concat('(').concat(dataItem[1].ip).concat(')'),
								value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
							};
						})
					}

				);

			});

			option = {
				backgroundColor: '#404a59',
				title: {
					//text: 'TOP-10 ATTACKER',
					subtext: '',
					left: 'center',
					textStyle: {
						color: '#fff'
					}
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					top: 'bottom',
					left: 'right',
					data: [],
					textStyle: {
						color: '#fff'
					},
					selectedMode: 'single'
				},
				geo: {
					map: 'world',
					zoom: 1.3,
					label: {
						emphasis: {
							show: true
						}
					},
					roam: true,
					itemStyle: {
						normal: {
							areaColor: '#323c48',
							borderColor: '#404a59'
						},
						emphasis: {
							areaColor: '#2a333d'
						}
					}
				},
				series: series
			};

			if(option && typeof option === "object") {
				underattack_Chart.setOption(option, true);
			}
		</script>

		<!--
        	作者：542440582@qq.com
        	时间：2017-01-06
        	描述：左侧3D地球
        -->

		<div class="col-md-4" id="3d_earth_area_att" style="z-index:1;margin-top:-350px;opacity: 0.5;">

			<div class="col-md-6" id="earth_area_atkdiv" style="z-index:1;opacity: 0.5;margin-left:-15px;">

				<p class="switch_triger" id="atk_switch" style="background-color: cornflowerblue;" align="center">ATTACKER</p>
				<p id="atk_area_name" style="background-color: lightgoldenrodyellow;" align="center">Antarctica</p>
			</div>
			<div class="col-md-6" id="earth_area_atkddiv" style="z-index:1;opacity: 0.5;">
				<p class="switch_triger" id="atkd_switch" style="background-color: cornflowerblue;" align="center">TARGET</p>
				<p id="atkd_area_name" style="background-color: lightgoldenrodyellow;" align="center">Antarctica</p>
			</div>

		</div>

		<script>
			$.ontime_attack_info = function() {
				//联调输入
				var ontime_atk_input_data = {};
				ontime_atk_input_data.category = "atkChart";
				ontime_atk_input_data.start = "2017-01-01 00:00:00";
				ontime_atk_input_data.end = "2017-01-01 00:00:00";
				//等待联调var ontime_atk_data = 接口（）；
				$.get('static/data/top10_attack&underatt/attacker.json', function(data) {
					$("#ontime_atk_ul").find('li').remove();
					data.data.forEach(function(item, i) {
						var notice_string = '位于	' + item.wz + '	;ip为:' + item.ip + ';威胁等级为：LEVEL' + item.wx + ';总共发起攻击次数：' + item.count + ';首次攻击时间为：' + item.first + '	;最近一次攻击时间:' + item.last;
						$("#ontime_atk_ul").append('<li><a href="#" target="_blank"></a></li>');
						$("#ontime_atk_ul li").last().find('a').html(notice_string);
					});
				});

			};

			$.ontime_attacked_info = function() {

				//联调输入
				var ontime_atkd_input_data = {};
				ontime_atkd_input_data.category = "atkdChart";
				ontime_atkd_input_data.start = "2017-01-01 00:00:00";
				ontime_atkd_input_data.end = "2017-01-01 00:00:00";
				//等待联调var ontime_atkd_data = 接口（）；
				$.get('static/data/top10_attack&underatt/underattack.json', function(data) {
					$("#ontime_atkd_ul").find('li').remove();
					data.data.forEach(function(item, i) {
						var notice_string = '	ip为:	' + item.ip + '的，资产名称为' + item.zcmc + '的资产' + '；总共受到攻击次数：' + item.count + ';最近一次被攻击时间为:' + item.last;
						$("#ontime_atkd_ul").append('<li><a href="#" target="_blank"></a></li>');
						$("#ontime_atkd_ul li").last().find('a').html(notice_string);

					});
				});

			};
			$("#underattack_ip").hide(); //一开始先隐藏被攻击画布
			$("#underdetail_info_area").hide(); //一开始就要隐藏攻击者信息详细信息列表
			$("#ontime_atkd").hide();

			$.ontime_attack_info();

			$(document).ready(function() {
				$("#atkd_switch").click(function() {
					$("#attack_ip").hide();
					$("#ontime_atk").hide();
					$('#detail_info_area').hide();
					$("#underattack_ip").show();
					$('#underdetail_info_area').show();
					$("#ontime_atkd").show();

					$.ontime_attacked_info();

				});
				$("#atk_switch").click(function() {

					$("#attack_ip").show();
					$("#ontime_atk").show();
					$('#detail_info_area').show();
					$("#underattack_ip").hide();
					$('#underdetail_info_area').hide();
					$("#ontime_atkd").hide();

				});
			});
		</script>

		<!--
        	作者：542440582@qq.com
        	时间：2017-01-08
        	描述：画地球
        -->

		<script>
			$.get_3d_earth = function(area_id, area_title) {
				var width = 160,
					height = 160;

				var projection = d3.geo.orthographic()
					.translate([width / 2, height / 2])
					.scale(width / 2 - 20)
					.clipAngle(90)
					.precision(0.6);

				var canvas = d3.select(area_id).append("canvas")
					.attr("width", width)
					.attr("height", height)

				;

				var c = canvas.node().getContext("2d");

				var path = d3.geo.path()
					.projection(projection)
					.context(c);

				var title = d3.select(area_title);

				queue()
					.defer(d3.json, "static/data/3dearth_data/world-110m.json")
					.defer(d3.tsv, "static/data/3dearth_data/world-country-names.tsv")
					.await(ready);

				function ready(error, world, names) {
					if(error) throw error;

					var globe = {
							type: "Sphere"
						},
						land = topojson.feature(world, world.objects.land),
						countries = topojson.feature(world, world.objects.countries).features,
						borders = topojson.mesh(world, world.objects.countries, function(a, b) {
							return a !== b;
						}),
						i = -1,
						n = countries.length;

					countries = countries.filter(function(d) {
						return names.some(function(n) {
							if(d.id == n.id) return d.name = n.name;
						});
					}).sort(function(a, b) {
						return a.name.localeCompare(b.name);
					});

					(function transition() {
						d3.transition()
							.duration(1250)
							.each("start", function() {
								var country = countries[i = (i + 1) % n];
								//console.log(country);
								if(country == undefined) {
									return false;
								} else {
									title.text(countries[i = (i + 1) % n].name);
								}
							})
							.tween("rotate", function() {
								var p = d3.geo.centroid(countries[i]),
									r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
								return function(t) {
									projection.rotate(r(t));
									c.clearRect(0, 0, width, height);
									c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill();
									c.fillStyle = "#f00", c.beginPath(), path(countries[i]), c.fill();
									c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
									c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke();
								};
							})
							.transition()
							.each("end", transition);
					})();
				}

				d3.select(self.frameElement).style("height", height + "px");

			};

			$.get_3d_earth("#earth_area_atkddiv", "#atkd_area_name");
			setTimeout(function() {

				$.get_3d_earth("#earth_area_atkdiv", "#atk_area_name");

			}, 1);
		</script>

		<div class="col-md-10 col-md-offset-1">

			<div class="portlet light bordered" id="detail_info_area">
				<div class="portlet-title">
					<div class="caption font-dark">
						<i class="icon-settings font-dark"></i>
						<span class="caption-subject bold uppercase" id="attack_title">TOP10攻击具体信息表</span>
					</div>

				</div>
				<div class="portlet-body">
					<table class="table table-striped table-bordered table-hover" id="detail_info">
						<caption>被攻击IP具体信息</caption>
						<thead>
							<tr>
								<th> 被攻击IP </th>
								<th> IP归属 </th>
								<th> 资产名称 </th>
								<th>端口号</th>
								<th> 协议 </th>
								<th> 攻击时间 </th>
								<th> 事件名称 </th>
								<th>威胁等级</th>

							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									default
								</td>
								<td>
									default
								</td>
								<td>
									default
								</td>
								<td>
									default
								</td>
								<td>
									default
								</td>
								<td>
									default
								</td>
								<td>
									default
								</td>
								<td>
									default
								</td>
							</tr>

						</tbody>
					</table>
				</div>
			</div>

			<div class="portlet light bordered" id="underdetail_info_area" hidden="hidden">
				<div class="portlet-title">
					<div class="caption font-dark">
						<i class="icon-settings font-dark"></i>
						<span class="caption-subject bold uppercase" id="underattack_title">TOP10攻击具体信息表</span>
					</div>

				</div>
				<div class="portlet-body">
					<table class="table table-striped table-bordered table-hover" id="underdetail_info">
						<caption>攻击IP具体信息</caption>
						<thead>
							<tr>
								<th> 攻击源IP </th>
								<th> IP归属 </th>
								<th> 攻击时间 </th>
								<th>端口号</th>
								<th> 协议 </th>

								<th> 事件名称 </th>
								<th>威胁等级</th>

							</tr>
						</thead>
						<tbody>
							<tr>
								<td>

								</td>
								<td>

								</td>
								<td>

								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>

						</tbody>
					</table>
				</div>
			</div>

		</div>

		<script>
			//页面初始化，要给table传数据
			jQuery(document).ready(function() {

				$('#detail_info').dataTable({

					// Or you can use remote translation file
					//"language": {
					//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
					//},

					// setup buttons extentension: http://datatables.net/extensions/buttons/
					buttons: [{
						extend: 'print',
						className: 'btn dark btn-outline'
					}, {
						extend: 'pdf',
						className: 'btn green btn-outline'
					}, {
						extend: 'csv',
						className: 'btn purple btn-outline '
					}],

					// setup responsive extension: http://datatables.net/extensions/responsive/
					responsive: true,

					// setup colreorder extension: http://datatables.net/extensions/colreorder/
					colReorder: {
						reorderCallback: function() {
							console.log('callback');
						}
					},

					"order": [
						[0, 'asc']
					],

					"lengthMenu": [
						[5, 10, 15, 20, -1],
						[5, 10, 15, 20, "All"] // change per page values here
					],
					// set the initial value
					"pageLength": 10,
					"destroy": true,
					"data": attack_switch_data,

					"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

					// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
					// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
					// So when dropdowns used the scrollable div should be removed. 
					//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

				});
				$('#underdetail_info').dataTable({

					// Or you can use remote translation file
					//"language": {
					//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
					//},

					// setup buttons extentension: http://datatables.net/extensions/buttons/
					buttons: [{
						extend: 'print',
						className: 'btn dark btn-outline'
					}, {
						extend: 'pdf',
						className: 'btn green btn-outline'
					}, {
						extend: 'csv',
						className: 'btn purple btn-outline '
					}],

					// setup responsive extension: http://datatables.net/extensions/responsive/
					responsive: true,

					// setup colreorder extension: http://datatables.net/extensions/colreorder/
					colReorder: {
						reorderCallback: function() {
							console.log('callback');
						}
					},

					"order": [
						[0, 'asc']
					],

					"lengthMenu": [
						[5, 10, 15, 20, -1],
						[5, 10, 15, 20, "All"] // change per page values here
					],
					// set the initial value
					"pageLength": 10,
					"destroy": true,
					"data": underattack_switch_data,

					"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

					// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
					// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
					// So when dropdowns used the scrollable div should be removed. 
					//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

				});

			});
		</script>

	</body>

</html>